<template>
  <Form class="login-view-form-panel" ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="userName">
      <Input v-model="form.userName" size="large" clearable placeholder="请输入账号" class="username-input">
        <span slot="prepend">
          <Icon :size="20" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <div class="pwd-block">
        <Input :type="isShowPwd ? 'text' : 'password'" v-model="form.password" size="large" :maxlength="32" clearable placeholder="请输入密码" class="pwd-input">
          <span slot="prepend">
            <Icon :size="20" type="md-lock"></Icon>
          </span>
        </Input>
        <Icon class="show-pwd" :size="20" :type="!isShowPwd ? 'md-eye' : 'md-eye-off'" @click="togglePwd"/>
      </div>
    </FormItem>
    <FormItem style="text-align: left;">
      <Checkbox v-model="ifRemember"> <span style="color: #aaa;">记住用户名</span></Checkbox>
    </FormItem>
    <FormItem>
      <Button type="primary" size="large" long :loading="loginLoading" :disabled="canNotClick" @click="handleSubmit">登 录</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  name: 'LoginViewForm',
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空！', trigger: 'change' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空！', trigger: 'change' }
        ]
      }
    },
    loginLoading: {
      type: Boolean,
      default: false
    },
    canNotClick: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShowPwd: false,
      form: {
        userName: '',
        password: ''
      },
      loading: false,
      ifRemember: false
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules
      }
    }
  },
  mounted () {
    let rememberUser = localStorage.getItem('rememberUser')
    if (rememberUser) {
      this.ifRemember = true
      let obj = JSON.parse(rememberUser)
      this.form = {
        userName: obj.userName,
        password: obj.password
      }
    }
    if (process.env.NODE_ENV === 'development') {
      this.form = {
        userName: 'jiesai1@chinagci.com',
        password: 'Jiesai@381'
      }
    }
  },
  methods: {
    // 显示/隐藏 密码
    togglePwd () {
      this.isShowPwd = !this.isShowPwd
    },
    // 回调组件登录事件
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            userName: this.form.userName,
            password: this.form.password,
            ifRemember: this.ifRemember
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.login-view-form-panel
  .pwd-block
    position relative
    & >>> .ivu-icon-ios-close-circle
      margin-right 18px
    & >>> input
      padding-right 46px
    .show-pwd
      position absolute
      cursor pointer
      right 4px
      top 9px
      z-index 10
      &:hover
        opacity .5
  .username-input, .pwd-input
    & >>> .ivu-input-group-prepend
      background white
      transition border .2s ease-in-out
      border 0px
      border-bottom 2px solid #ccc
    & >>> .ivu-input
      border 0px
      border-bottom 2px solid #ccc
      &:focus
        box-shadow none
  & >>> .ivu-form-item-error
    .ivu-input, .ivu-input-group-prepend
      border-bottom 2px solid #ed4014 !important
</style>
